<template>
  <bg-set background="#f2f3f7" />
  <view class="is-take-from-oneself-setting">
    <nav-bar left-text="收货偏好设置" />
    <view class="is-take-from-oneself-setting__main f fd-col ai-c">
      <view class="stage-info f ai-c">
        <image
          src="/static/image/profile/stage_small.png"
          mode="widthFix"
          style="width: 60rpx"
        ></image>
        <view class="info f fd-col ai-fs">
          <view
            style="
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
            "
            :title="address"
            >{{ address }}</view
          >
          <view style="font-size: 20rpx; color: #999; margin-top: 10rpx"
            >营业时间：周一至周日 08点59分到22点00分</view
          >
        </view>
      </view>
      <view class="edit-part f f1 fd-col ai-c">
        <view
          class="is-take-from-oneself-setting radio-box f jc-sb ai-c"
          @click="radioValue = 1"
        >
          <view class="f fd-col ai-fs">
            <text>帮我暂存，有空去拿</text>
            <text style="font-size: 20rpx; color: #999">随时可选送货上门</text>
          </view>
          <view>
            <view
              style="
                display: table-cell;
                vertical-align: middle;
                background-color: #fff;
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                border: 1px solid #000;
              "
            >
              <view
                :class="[
                  radioValue === 1
                    ? 'radio-input-active'
                    : 'radio-input-not-active',
                  'radio-input',
                ]"
              ></view>
            </view>
          </view>
        </view>
        <view
          class="is-not-take-from-oneself-setting radio-box f fd-col"
          @click="radioValue = 2"
        >
          <view class="f jc-sb ai-c">
            <view>
              <view
                ><text>需要送货上门</text
                ><view style="display: inline-block; margin-left: 10rpx"
                  ><uni-icons type="info" size="15"></uni-icons
                  ><text>上门服务说明</text></view
                ></view
              >
              <text
                style="
                  display: inline-block;
                  font-size: 20rpx;
                  color: #999;
                  width: 500rpx;
                "
                >你的包裹将由快递点为你送货上门,如有其他需求，请联系快递点客服进行协商</text
              >
            </view>
            <view>
              <view
                style="
                  display: table-cell;
                  vertical-align: middle;
                  background-color: #fff;
                  width: 40rpx;
                  height: 40rpx;
                  border-radius: 50%;
                  border: 1px solid #000;
                "
              >
                <view
                  :class="[
                    radioValue === 2
                      ? 'radio-input-active'
                      : 'radio-input-not-active',
                    'radio-input',
                  ]"
                ></view>
              </view>
            </view>
          </view>
          <view v-if="radioValue === 2" class="choose-time f ai-c">
            <uni-data-checkbox
              v-model="timeRadioValue"
              :localdata="range"
              mode="tag"
            />
          </view>
        </view>
      </view>
    </view>
    <view class="is-take-from-oneself-setting__footer f fd-col ai-c jc-fe">
      <view style="color: #999; margin-bottom: 20rpx"
        >如需帮助，请联系快递点客服</view
      >
      <view class="button-part f jc-c">
        <van-button
          :loading="isLoading"
          type="primary"
          size="large"
          style="width: 90%; height: 100rpx"
          round
          loading-type="spinner"
          loading-text="提交设置中"
          @click="submit"
          >确认设置</van-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import profileAPI from "/api/modules/profile";
export default {
  name: "is-take-from-oneself-setting",
  data() {
    return {
      userName: "",
      address: "",
      radioValue: 1,
      timeRadioValue: 3,
      isLoading: false,
      range: [
        { value: 0, text: "都方便" },
        { value: 1, text: "周一至周五" },
        { value: 2, text: "周末" },
      ],
      toastStatus: 0,
      toastMessage: ["设置成功", "设置失败，请稍后重试"],
    };
  },
  onLoad(option) {
    this.userName = option.userName;
    this.address = option.address;
    this.radioValue = Number(option.isTakeFromOneself);
    this.timeRadioValue = Number(option.timeChoose) || this.timeRadioValue;
  },
  methods: {
    submit() {
      this.isLoading = true;
      profileAPI
        .updateStage({
          isTakeFromOneself: this.radioValue,
          timeChoose: Number(this.timeRadioValue),
          userName: this.userName,
          address: this.address,
        })
        .then((res) => {
          uni.showToast({
            title: this.toastMessage[this.toastStatus],
            icon: "success",
            duration: 1000,
            position: "top",
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 2000);
        })
        .catch((err) => {
          console.log(err);
          this.toastStatus = 1;
          uni.showToast({
            title: this.toastMessage[this.toastStatus],
            icon: "none",
            duration: 1000,
            position: "top",
          });
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
  },
};
</script>
<style lang='scss' scoped>
.is-take-from-oneself-setting {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-image: url("~@/static/image/profile/SpongeBob SquarePants.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0 180rpx;
  &__main {
    position: absolute;
    top: 780rpx;
    left: 0;
    width: 100%;
    height: 600rpx;
    .stage-info {
      margin-bottom: 30rpx;
      padding: 30rpx;
      width: 96%;
      box-sizing: border-box;
      box-shadow: 0 2px 4px #999;
      border-radius: 30rpx;
      background-color: #fff;
      .info {
        margin-left: 20rpx;
        width: 600rpx;
      }
    }
    .edit-part {
      width: 96%;
      .radio-box {
        position: static;
        &:first-child {
          margin-bottom: 30rpx;
          height: 140rpx;
        }
        padding: 20rpx;
        width: 100%;
        box-sizing: border-box;
        box-shadow: 0 2px 4px #999;
        background-color: #fff;
        background-image: none;
        border-radius: 20rpx;
        .radio-input {
          margin: 0 auto;
          width: 30rpx;
          height: 30rpx;
          border-radius: 50%;
        }
        .radio-input-active {
          background-color: rgb(0, 122, 255);
          border-color: rgb(0, 122, 255);
        }
        .radio-input-not-active {
          background-color: #fff;
          border-color: #fff;
        }
      }
      .is-not-take-from-oneself-setting {
        .choose-time {
          margin-top: 20rpx;
          width: 100%;
          height: 80rpx;
          background-color: #fff;
          border-top: 1px solid #999;
        }
      }
    }
  }
  &__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160rpx;
    .button-part {
      padding: 10rpx 0 30rpx 0;
      width: 100%;
      height: 140rpx;
      background-color: #fff;
      box-sizing: border-box;
    }
  }
}
</style>